import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'


// 使用NavLink或者Link进行跳转 被称作为声明式路由导航
// Navigate  使用navigte方法进行路由跳转,被称作为编程式路由导航
export default function Home() {

  // 使用useNavigate调用之后,会返回一个navigaet方法
  // navigaet后面可以直接书写路径进行路由跳转
  // 这种方式就是编程式路由导航
  const navigaet=useNavigate()

  // 给绑定的点击事件函数书写跳转逻辑
  const toMusicHandle=()=>{
    navigaet('/main/home/music?user=张三&id=001')
  }
  const toNewsHandle=()=>{
    navigaet('/main/home/news?user=李四&id=001')
  }


  return (
    <div>
      <div>我是Home的内容</div>
      {/* 给按钮绑定点击事件函数 */}
      <button onClick={toMusicHandle}>Music</button>
      <button onClick={toNewsHandle}>News</button>
      <Outlet/>
    </div>
  )
}
